<template>
  <div class="test-container">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <el-button type="text" @click="showCourse"><b>课程</b></el-button>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="show2 || show3">
          <el-button type="text" @click="showChapter"><b>{{courseName}}</b></el-button>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="show3">
          <el-button type="text"><b>{{chapterName}}</b></el-button>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="course" v-if="show1">
      <!-- 头部查询框 -->
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-button icon="el-icon-plus" type="warning" @click="importByTemplate">
            模板导入
          </el-button>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-form ref="form" :model="courseForm" :inline="true" @submit.native.prevent>
            <el-form-item style="width: 160px;">
              <el-select v-model="courseForm.paramMap.majorId" placeholder="选择专业" clearable>
                <el-option v-for="item in majorList" :key="item.majorId" :label="item.majorName" :value="item.majorId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 160px;">
              <el-input v-model="courseForm.paramMap.courseName" placeholder="课程名称" clearable />
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-right-panel>
      </vab-query-form>

      <!-- 列表 -->
      <el-table ref="tableSort" v-loading="listLoading" :data="courseList" :element-loading-text="elementLoadingText"
        :height="height">
        <el-table-column show-overflow-tooltip label="序号" width="120">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="stageCourseName" label="课程"></el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="260px">
          <template #default="{ row }">
            <el-button type="text" @click="intoCourse(row)">进入</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination :background="background" :current-page="courseForm.current" :layout="layout"
        :page-size="courseForm.size" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <div class="chapter" v-if="show2">
      <!-- 头部查询框 -->
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-button icon="el-icon-plus" type="warning" @click="importByTemplate">
            模板导入
          </el-button>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-form ref="form" :model="chapterForm" :inline="true" @submit.native.prevent>
            <el-form-item style="width: 160px;">
              <el-input v-model="chapterForm.paramMap.chapterName" placeholder="章节" clearable />
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery2">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-right-panel>
      </vab-query-form>
      <!-- 列表 -->
      <el-table ref="tableSort" v-loading="listLoading" :data="chapterList" :element-loading-text="elementLoadingText"
        :height="height">
        <el-table-column show-overflow-tooltip label="序号" width="120">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="chapterName" label="章节"></el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="260px">
          <template #default="{ row }">
            <el-button type="primary" round size="mini" @click="showLibrary(row)">查看题库</el-button>
            <el-button type="danger" round size="mini" @click="delLibraryByChapter(row)">删除题库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :background="background" :current-page="chapterForm.current" :layout="layout"
        :page-size="chapterForm.size" :total="total2" @current-change="handleCurrentChange2"
        @size-change="handleSizeChange2">
      </el-pagination>
    </div>

    <div class="library" v-if="show3">
      <!-- 头部查询框 -->
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-button icon="el-icon-plus" type="warning" @click="importByTemplate">
            模板导入
          </el-button>
          <el-button icon="el-icon-plus" type="primary" @click="addLibrary">
            添加
          </el-button>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-form ref="form" :model="libraryForm" :inline="true" @submit.native.prevent>
            <el-form-item style="width: 160px;">
              <el-select v-model="libraryForm.paramMap.theoryType" placeholder="题目类型" clearable>
                <el-option value="1-单选题"></el-option>
                <el-option value="2-多选题"></el-option>
                <el-option value="0-判断题"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 160px;">
              <el-input v-model="libraryForm.paramMap.theoryTitle" placeholder="理论题目" clearable />
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery3">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-right-panel>
      </vab-query-form>
      <!-- 内容展示 -->
      <div v-for="(content,index) in libraryList">
        <pre
          style="font-size: x-large;padding-left: 20px;padding-top: 10px;font-weight: 700;">题目类型：【{{content.theoryType}}】 知识点：【{{content.knowledge}}】 出题人：【{{content.person}}】</pre>
        <pre style="font-size: x-large;background-color: #CCCCCC;padding: 15px;font-weight: 700;"
        >{{index+1+((libraryForm.current-1)*libraryForm.size)}}. {{content.theoryTitle}}</pre>
        <ul>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option1!=''">A：{{content.option1}}</li>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option2!=''">B：{{content.option2}}</li>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option3!=''">C：{{content.option3}}</li>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option4!=''">D：{{content.option4}}</li>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option5!=''">E：{{content.option5}}</li>
          <li style="list-style-type:none;margin-top: 10px;" v-if="content.option6!=''">F：{{content.option6}}</li>
        </ul>
        <pre style="font-size: x-large;padding-left: 20px;padding-top: 10px;">正确答案：{{content.answers}}</pre>
        <pre style="font-size: x-large;padding-left: 20px;">试题解析：{{content.analysis}}</pre>
        <p align="right" style="margin-right: 50px;">
          <el-button type="primary" round @click="updateLibrary(content)">编辑</el-button>
          <el-button type="danger" round @click="deleteLibrary(content)">删除</el-button>
        </p>
      </div>
      <!-- 分页 -->
      <el-pagination :background="background" :current-page="libraryForm.current" :layout="layout"
        :page-size="libraryForm.size" :total="total3" @current-change="handleCurrentChange3"
        @size-change="handleSizeChange3">
      </el-pagination>
    </div>

    <!-- 编辑弹窗 -->
    <div>
      <el-dialog title="题目编辑" :visible.sync="dialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="出题人" :label-width="formLabelWidth">
            <el-input v-model="editForm.person"></el-input>
          </el-form-item>
          <el-form-item label="章节" :label-width="formLabelWidth">
            <el-select v-model="editForm.chapterId" placeholder="请选择章节">
              <el-option v-for="item in allChapterList" :key="item.chapterId" :label="item.chapterName" :value="item.chapterId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="知识点" :label-width="formLabelWidth">
            <el-input v-model="editForm.knowledge"></el-input>
          </el-form-item>
          <el-form-item label="题目类型" :label-width="formLabelWidth">
            <el-select v-model="editForm.theoryType" placeholder="所有类型">
              <el-option value="1-单选题"></el-option>
              <el-option value="2-多选题"></el-option>
              <el-option value="0-判断题"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="理论题目" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.theoryTitle"></el-input>
          </el-form-item>
          <el-form-item label="选项A" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option1"></el-input>
          </el-form-item>
          <el-form-item label="选项B" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option2"></el-input>
          </el-form-item>
          <el-form-item label="选项C" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option3"></el-input>
          </el-form-item>
          <el-form-item label="选项D" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option4"></el-input>
          </el-form-item>
          <el-form-item label="选项E" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option5"></el-input>
          </el-form-item>
          <el-form-item label="选项F" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editForm.option6"></el-input>
          </el-form-item>
          <el-form-item label="答案" :label-width="formLabelWidth" >
            <el-input v-model="editForm.answers" placeholder="选择填ABCDEF，中间不能有空格 判断填A或B"></el-input>
          </el-form-item>
          <el-form-item label="试题解析" :label-width="formLabelWidth">
            <el-input v-model="editForm.analysis"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 导入文件录入 -->
    <div>
        <el-dialog title="模板导入" :visible.sync="dialogFormVisible2">
          <el-form :model="importForm">
            <el-form-item label="课程" :label-width="formLabelWidth">
              <el-select v-model="importForm.courseId" placeholder="请选择课程">
                <el-option v-for="item in courseList" :key="item.stageId" :label="item.stageCourseName"  :value="item.stageId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="章节" :label-width="formLabelWidth">
              <el-select v-model="importForm.chapterId" placeholder="请选择章节">
                <el-option v-for="item in allChapterList" :key="item.chapterId" :label="item.chapterName" :value="item.chapterId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题库文件" :label-width="formLabelWidth">
              <el-upload
                class="upload-demo"
                action="http://localhost:8500/task/library/uploadFileInputTaskTheory"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple>
                <el-button slot="trigger" size="small" type="primary">读取文件</el-button>
                </el-button>
              </el-upload>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="saveDataByImport">确 定</el-button>
          </div>
        </el-dialog>
    </div>
  </div>


</template>
<script>
  import {
    listStage,
    listAllMajor,
    listTaskChapter,
    listTaskTheoryLibrary,
    deleteTaskTheoryByTheoryIds,
    listAllTaskChapter,
    deleteTaskTheoryByChapterIds,
    updateTaskTheory,
    onLineInputTaskTheory
  } from '@/api/task.js'
  export default {
    name: 'theoryIndex',
    data() {
      return {
        courseList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        elementLoadingText: '正在加载...',
        courseName: '',
        courseForm: {
          current: 1,
          size: 10,
          paramMap: {
            schoolId: ''
          },
        },
        majorList: [],
        show1: true,
        show2: false,
        show3: false,

        chapterList: [],
        total2: 0,
        chapterName: '',
        chapterForm: {
          current: 1,
          size: 10,
          paramMap: {
            schoolId: '',
            courseId: ''
          },
        },
        libraryList: [],
        total3: 0,
        libraryForm: {
          current: 1,
          size: 10,
          paramMap: {
            schoolId: '',
            chapterId: '',
            courseId: ''
          },
        },

        dialogFormVisible: false,
        formLabelWidth: '120px',
        allChapterList:[],
        editForm: {},

        dialogFormVisible2:false,
        importForm:{}
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      //学院ID
      window.sessionStorage.setItem("schoolId", "1440285428262379522");
      this.courseForm.paramMap.schoolId = window.sessionStorage.getItem("schoolId");
      this.courseData()
      this.majorData()
      this.allChapterData()
    },
    mounted() {

    },
    methods: {
      saveDataByImport(){
        console.log(this.importForm)
        onLineInputTaskTheory(this.importForm).then(data => {
          if (data.code == 200) {
            this.$baseMessage(data.msg, 'success')
            this.dialogFormVisible2 = false
          } else {
            this.$baseMessage(data.msg, 'error')
          }
          this.libraryData()
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.importForm.libraryList={}
        this.$baseMessage("删除成功", 'success')
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleSuccess(res){
        console.log(res)
        this.importForm.libraryList=res.data
        this.$baseMessage(res.msg, 'success')
      },
      importByTemplate(){
        this.importForm={}
        this.importForm.schoolId=window.sessionStorage.getItem("schoolId")
        if(this.show2 || this.show3){
          this.importForm.courseId=this.chapterForm.paramMap.courseId
        }
        if(this.show3){
          this.importForm.chapterId=this.libraryForm.paramMap.chapterId
        }
        this.dialogFormVisible2=true
      },
      saveEdit(){
        console.log(this.editForm)
        if(this.editForm.theoryId==null){
          console.log("新")
        }else{
          updateTaskTheory(this.editForm).then(data => {
            if (data.code == 200) {
              this.$baseMessage(data.msg, 'success')
              this.dialogFormVisible = false
            } else {
              this.$baseMessage(data.msg, 'error')
            }
            this.libraryData()
          })
        }
      },
      addLibrary(){

        this.editForm={}
        this.editForm.schoolId=window.sessionStorage.getItem("schoolId")
        this.editForm.courseId=this.libraryForm.paramMap.courseId
        this.editForm.chapterId=this.libraryForm.paramMap.chapterId
        this.dialogFormVisible = true
      },
      updateLibrary(val) {
        this.editForm=val
        this.dialogFormVisible = true
      },
      deleteLibrary(val) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const {
            msg
          } = await deleteTaskTheoryByTheoryIds({
            ids: [val.theoryId],
          })
          this.$baseMessage(msg, 'success')
          if (this.libraryList.length == 1) {
            this.libraryForm.current = parseInt(this.libraryForm.current) - 1
          }
          this.libraryData()
        })

      },
      delLibraryByChapter(row){
        console.log(row)
        this.$baseConfirm('你确定要删除'+this.courseName+'【'+row.chapterName+'】的所有作业题吗', null, async () => {
          const {
            msg
          } = await deleteTaskTheoryByChapterIds({
            ids: [row.chapterId],
          })
          this.$baseMessage(msg, 'success')
          this.chapterData()
        })
      },
      showLibrary(row) {
        this.show1 = false
        this.show2 = false
        this.show3 = true
        this.chapterName = row.chapterName
        this.libraryForm = {
          "current": 1,
          "size": 10,
          "paramMap": {
            "schoolId": window.sessionStorage.getItem("schoolId"),
            "chapterId": row.chapterId,
            "courseId": this.chapterForm.paramMap.courseId,
          }
        }
        this.libraryData()
      },
      showChapter() {
        this.show1 = false
        this.show2 = true
        this.show3 = false
      },
      showCourse() {
        this.show1 = true
        this.show2 = false
        this.show3 = false
      },
      intoCourse(row) {
        this.show1 = false
        this.show2 = true
        this.show3 = false
        this.courseName = row.stageCourseName
        this.chapterForm = {
          current: 1,
          size: 10,
          paramMap: {
            schoolId: window.sessionStorage.getItem("schoolId"),
            courseId: row.stageId
          },
        }
        this.chapterData()
      },
      handleSizeChange3(val) {
        this.libraryForm.size = val
        this.libraryData()
      },
      handleCurrentChange3(val) {
        this.libraryForm.current = val
        this.libraryData()
      },
      handleQuery3() {
        this.libraryForm.current = 1
        this.libraryData()
      },
      handleSizeChange2(val) {
        this.chapterForm.size = val
        this.chapterData()
      },
      handleCurrentChange2(val) {
        this.chapterForm.current = val
        this.chapterData()
      },
      handleQuery2() {
        this.chapterForm.current = 1
        this.chapterData()
      },
      handleSizeChange(val) {
        this.courseForm.size = val
        this.courseData()
      },
      handleCurrentChange(val) {
        this.courseForm.current = val
        this.courseData()
      },
      handleQuery() {
        this.courseForm.current = 1
        this.courseData()
      },
      async allChapterData() {
        let tbChapter = {
          "schoolId": window.sessionStorage.getItem("schoolId")
        }
        const {
          data
        } = await listAllTaskChapter(tbChapter)
        this.allChapterList = data
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      async majorData() {
        let tbMajor = {
          "collageId": window.sessionStorage.getItem("schoolId")
        }
        const {
          data
        } = await listAllMajor(tbMajor)
        this.majorList = data
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      async libraryData() {
        //this.listLoading = true
        window.scrollTo(0, 0)
        const {
          data
        } = await listTaskTheoryLibrary(this.libraryForm)
        console.log(data)
        this.libraryList = data.records
        this.total3 = parseInt(data.total)
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      async chapterData() {
        //this.listLoading = true
        const {
          data
        } = await listTaskChapter(this.chapterForm)
        console.log(data)
        this.chapterList = data.records
        this.total2 = parseInt(data.total)
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      async courseData() {
        //this.listLoading = true
        const {
          data
        } = await listStage(this.courseForm)
        console.log(data)
        this.courseList = data.records
        this.total = parseInt(data.total)
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
    },
  }
</script>
